<template>
    <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.topoName' prop='topoName'>
                    <el-input v-model.trim='formInline.topoName' clearable :placeholder='prompt?.topoName' />
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.groupId' prop='groupId'>
                    <templateFolderSelect v-model='formInline.groupId' :project-id="formInline?.unityId"
                        :is-public="formInline?.isPublic" clearable :placeholder='prompt?.groupId'
                        :style="{ width: '100%' }" />
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24' v-if="formInline.id">
                <el-form-item label='是否保存当前画布'>
                    <el-radio-group v-model="formInline.isSaveCurrent">
                        <el-radio :value="true">是</el-radio>
                        <el-radio :value="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import ReCol from "@/components/ReCol";
import templateFolderSelect from './templateFolderSelect.vue'
import type { FormRules } from "element-plus";

const props = defineProps({
    formInline: {
        type: Object,
        default: () => ({})
    },
    isLoading: {
        type: Boolean,
        default: false
    }
})
const ruleFormRef = ref();
const titles = {
    topoName: '组态名称',
    groupId: '文件夹',
}
const prompt = {
    topoName: `请输入${titles.topoName}`,
    groupId: `请选择${titles.groupId}`,
}
const formRules = reactive(<FormRules>{
    groupId: [
        { required: true, message: prompt.groupId, trigger: 'blur' }
    ],
    topoName: [
        { required: true, message: prompt.topoName, trigger: 'blur' }
    ],
})
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>